<template>
  <div class="model-center">
    <!-- 标签页 -->
    <div class="tabs-section">
      <a-tabs v-model="activeTab" @change="handleTabChange">
        <a-tab-pane key="1" tab="Python模型">
          <ModelList modelType="python" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="PMML模型" v-if="$hasPermission('searchPmmlModel')">
          <ModelList modelType="pmml" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="评分卡模型" v-if="$hasPermission('searchScoreCardModel')">
          <ModelList modelType="scorecard" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import ModelList from './ModelList'

export default {
  name: 'ModelCenter',
  components: {
    ModelList,
  },
  data() {
    return {
      activeTab: '1',
    }
  },
  mounted() {
    // 根据路由参数设置默认选中的标签页
    const { currentTab } = this.$route.query
    if (currentTab) {
      this.activeTab = currentTab
    }
    this.getSystemConfig()
  },
  methods: {
    ...mapActions({
      getSystemConfig: 'model/getSystemConfig',
    }),
    handleTabChange(key) {
      this.activeTab = key
      // 切换标签页时，更新路由参数
      this.$router.push({ query: { currentTab: key } })
    }
  },
}
</script>

<style lang="less" scoped>
.model-center {
  background: #f5f5f5;
  min-height: 100vh;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0;

    .header-left {
      .page-title {
        font-size: 20px;
        font-weight: 500;
        color: #262626;
        margin: 0;
      }
    }

    .header-right {
      .ant-btn {
        height: 32px;
        font-size: 14px;
      }
    }
  }

  .tabs-section {
    background: #fff;
    border-radius: 6px;
    padding-left: 16px;
    .ant-tabs {
      .ant-tabs-bar {
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
      }

      .ant-tabs-nav-container {
        padding: 0 16px;
      }

      .ant-tabs-tab {
        padding: 12px 16px;
        font-size: 14px;
      }
    }
  }
}
</style>
